<template>
  <el-aside width="200px" style="min-height:700px;" ref="asideRef">
    <el-scrollbar>
      <el-menu
          active-text-color="#ffd04b"
          :default-active="active"
          @select="handleSelect"
      >
        <el-menu-item index="1">
          <el-icon><icon-menu /></el-icon>
          <span>深度思考</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>生命密码计算</span>
          </template>
          <el-menu-item index="2-1">
            <el-icon><icon-menu /></el-icon>
            <span>介绍</span>
          </el-menu-item>
          <el-menu-item index="2-2">
            <el-icon><icon-menu /></el-icon>
            <span>计算</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><document /></el-icon>
            <span>生平纵横</span>
          </template>
          <el-menu-item index="3-1">
            <el-icon><icon-menu /></el-icon>
            <span>介绍</span>
          </el-menu-item>
<!--          <el-menu-item index="3-2">-->
<!--            <el-icon><icon-menu /></el-icon>-->
<!--            <span>添加</span>-->
<!--          </el-menu-item>-->
          <el-menu-item index="3-3">
            <el-icon><icon-menu /></el-icon>
            <span>Chat</span>
          </el-menu-item>
          <el-menu-item index="3-4">
            <el-icon><icon-menu /></el-icon>
            <span>命盘</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </el-aside>
  <el-icon class="home-icon-menu" @click="handleIconMenu" ><icon-menu /></el-icon>
  <el-drawer v-model="drawerMenu"
             :with-header="false"
             direction="ltr"
             size="50%"
  >
    <el-scrollbar>
      <el-menu
          active-text-color="#ffd04b"
          :default-active="active"
          @select="handleSelect"
      >
        <el-menu-item index="1">
          <el-icon><icon-menu /></el-icon>
          <span>深度思考</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>生命密码计算</span>
          </template>
          <el-menu-item index="2-1">
            <el-icon><icon-menu /></el-icon>
            <span>介绍</span>
          </el-menu-item>
          <el-menu-item index="2-2">
            <el-icon><icon-menu /></el-icon>
            <span>计算</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><document /></el-icon>
            <span>生平纵横</span>
          </template>
          <el-menu-item index="3-1">
            <el-icon><icon-menu /></el-icon>
            <span>介绍</span>
          </el-menu-item>
          <!--          <el-menu-item index="3-2">-->
          <!--            <el-icon><icon-menu /></el-icon>-->
          <!--            <span>添加</span>-->
          <!--          </el-menu-item>-->
          <el-menu-item index="3-3">
            <el-icon><icon-menu /></el-icon>
            <span>Chat</span>
          </el-menu-item>
          <el-menu-item index="3-4">
            <el-icon><icon-menu /></el-icon>
            <span>命盘</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </el-drawer>
  <el-main>
    <!--1-->
    <deep-thinking v-if="active == 1" />
    <!--2-->
    <life-code v-else-if="active == '2-1'" />
    <code-calculator v-else-if="active == '2-2'" />

    <!--3-->
    <life-span v-else-if="active == '3-1'" />
<!--    <add-profile v-else-if="active == '3-2'" />-->
    <life-chat v-else-if="active == '3-3'"/>
    <birth-chart v-else-if="active == '3-4'"/>
  </el-main>
</template>

<script>
// @ is an alias to /src
import {onMounted, ref} from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import LifeCode from "@/components/LifeCode/LifeCode";
import LifeSpan from "@/components/LifeSpan/LifeSpan";
import DeepThinking from "@/components/DeepThinking/DeepThinking";
import AddProfile from "@/components/LifeSpan/AddProfile";
import CodeCalculator from "@/components/LifeCode/CodeCalculator";
import LifeChat from "@/components/LifeSpan/LifeChat";
import BirthChart from "@/components/LifeSpan/BirthChart";

export default {
  name: 'Home',
  components: {
    CodeCalculator,
    DeepThinking,
    LifeSpan,
    LifeCode,
    Document,
    IconMenu,
    Location,
    AddProfile,
    LifeChat,
    BirthChart
  },
  setup(){
    const drawerMenu = ref(false);
    const active =ref('1');
    const handleSelect = (index,indexPath,item)=>{
      console.log("select",index,indexPath,item);
      active.value = index;
      drawerMenu.value = false;
    }
    const handleIconMenu = ()=>{
      drawerMenu.value = !drawerMenu.value;
    }

    const setElAsideStyle = ()=>{
      let viewHeight = window.innerHeight;
      let viewWidth = window.innerWidth;
      let elAsideClass = document.getElementsByClassName("el-aside");
      let homeIconClass = document.getElementsByClassName("home-icon-menu");
      for(let i=0;i<elAsideClass.length;i++){
        if(viewHeight > viewWidth) {
          let asideStyle = "display: none;";
          elAsideClass[i].setAttribute('style', asideStyle);
          drawerMenu.value = true;


          let homeIconStyle = "display: block;";
          homeIconClass[0].setAttribute('style', homeIconStyle);
        }
        else {
          let asideStyle = "display: block;";
          elAsideClass[i].setAttribute('style', asideStyle);
          drawerMenu.value = false;


          let homeIconStyle = "display: none;";
          homeIconClass[0].setAttribute('style', homeIconStyle);
        }
      }
    }

    onMounted(() => {
      setElAsideStyle()
      // 监听浏览器高度变化
      window.onresize = () => {
        setElAsideStyle()
      };
    })
    return {
      active,
      handleSelect,
      drawerMenu,
      handleIconMenu
    }
  }
}
</script>
<style lang="scss">
.home-icon-menu{
  position: absolute;
  left:5%;
  top:23%;

}
</style>
